<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/20 0020
  Time: 15:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>制定物料组成设计单子</title>
    <link rel="stylesheet"  href="/bootstrap/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/ProductDesign/module(1).css" />
    <style type="text/css">

    </style>
</head>
<body style="padding: 0px 0px;background-color: #eeeeee;">
<div class="panel-heading hhead">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <span style="color: blue;">您正在做的业务是：</span>
            <li class="breadcrumb-item"><a href="#">产品物料组成设计</a></li>
            <li class="breadcrumb-item active" aria-current="page">制定物料组成设计单</li>
        </ol>
    </nav>
</div>
<div><small>至少有一种物料（数量可为0）</small></div>
<div style="margin-bottom: 2px">
    <div style="display: inline;margin-left: 79%;">
        <button class="btn btn-primary" id="Add">添加物料</button>
        <button class="btn btn-primary" id="delete">删除物料</button>
        <button class="btn btn-primary" id="submit">提交</button>
    </div>
</div> <!-- 此div改用栅格来做 -->
<div id="designListBox">
    <div style="text-align: center">
        <h3>物料组成设计单</h3>
    </div>
    <div style="padding: 15px">
        <table class="tbl1">
            <tr>
                <td class="col1">产品名称：</td>
                <td class="col2" id="productName">aaa</td>
                <td class="col1">产品编号：</td>
                <td class="col2" id="productId">aaa</td>
            </tr>
            <tr>
                <td class="col1">设计人：</td>
                <td colspan="1">
                    <input type="text" class="txt_under_line" id="Designer">
                </td>
            </tr>
        </table>

        <table class="table table-bordered" style="margin: 15px auto;">
            <thead>
            <tr>
                <th>点选</th><th>物料编号</th><th>物料名称</th>
                <th>用途类型</th><th>描述</th><th>数量</th>
                <th>单位</th><th>计划成本单价（元）</th><th>小计（元）</th>
            </tr>
            </thead>
            <tbody id="template">

            </tbody>
        </table>

        <table class="tbl3">
            <tr>
                <td class="col1">登记人：</td>
                <td class="col2"><input type="text" class="txt_under_line" id="Registrants"></td>
                <td class="col1">登记时间：</td> <td class="col2" id="time"></td>
            </tr>
            <tr>
                <td class="col1">设计要求：</td>
                <td colspan="3" style="padding-top: 5px">
                    <textarea rows="4" cols="100" id="moduleDescribe"></textarea>
                </td>
            </tr>
        </table>
    </div>
</div>
<form id="Fm1">

</form>
<div class="modal fade" id="AddModuleDetailsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content" style="height: 450px">
            <div class="modal-header" style="height: 8%">
                <h3 class="modal-title" id="staticBackdropLabel">添加物料</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="height: 100%;width: 100%;margin: -1%">
                <iframe id="iframe2" src="" style="width: 100%;height: 99%"></iframe>
            </div>
            <div class="modal-footer" style="height: 15%">
<%--                <button id="btnOK" class="btn btn-success">--%>
<%--                    确定<span class="glyphicon glyphicon-ok"></span>--%>
<%--                </button>--%>

                <button id="btnConcel" class="btn btn-success" data-bs-dismiss="modal">
                    确认<span class="glyphicon glyphicon-remove"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="/bootstrap/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
    $(function () {
        initialMaterial();

        // 初始化时间
        setInterval(updateDateTime, 1000);

        $("#Add").click(function () {
            $("#AddModuleDetailsModal").modal("show");
            $("#iframe2").attr("src", "/d-file/AddMaterial");
        })

        $("#delete").click(function () {
            let rows = $("#template tr");
            console.log(rows)
            for (let i = 0; i < rows.length; i++) {
                let row = rows[i];
                let checkbox = $(row).find("input[type='checkbox']");
                if (checkbox.prop("checked")) {
                    $(row).remove();
                }else {
                    alert("请勾选要删除的物料");
                }
            }
        })

        $("#submit").click(function () {
            let designer = $("#Designer").val();
            if (designer == "") {
                alert("请输入设计人");
                return; // 弹出提示框
            }
            if($("#Registrants").text() == ""){
                $("#Registrants").text(designer);
            }
            if($("#template tr").length==0){
                alert("请添加物料(至少一种)");
                return;
            }
            let register = $("#Registrants").text();
            let productId = $("#productId").text();
            let productName = $("#productName").text()
            let moduleDescribe = $("#moduleDescribe").text()
            let registerTime = $("#time").text();

            let rows = $("#template tr");
            let data = [];
            data.push({
                productId: productId,
                productName: productName,
                designer: designer,
                register: register,
                moduleDescribe: moduleDescribe,
                registerTime: registerTime
            })
            for (let i = 0; i < rows.length; i++) {
                let row = rows[i];
                let id = $(row).find("td:eq(1)").text();
                let num = $(row).find(".num-input").val();
                // if (num == ""){
                //     num = 0;
                // }
                let costPrice = $(row).find("td:eq(7)").text();
                let total = costPrice * num;
                let obj = {
                    id: id,
                    num: num,
                    costPrice: costPrice,
                    total: total
                }
                data.push(obj);
            }
            console.log(data)
            sessionStorage.setItem("data", JSON.stringify(data));
            alert("提交成功");
        })

        $("#AddModuleDetailsModal").on("hidden.bs.modal", function () {
            $("#iframe2").attr("src", "");
            let IdItems = sessionStorage.getItem("IdItems");
            console.log(IdItems)
            sessionStorage.clear();
            IdItems = JSON.parse(IdItems);
            if (IdItems == null){
                return;
            }
            $("#template").empty();
            for (let i = 0; i < IdItems.length; i++) {
                let id = IdItems[i];
                if (id != null || id != "" || id!= undefined){
                    addToTable(id);
                }
            }
        })
        $("#template").on("input",".num-input", function () {
            let num = $(this).val();
            //判断是否为数字
            if (!/^[0-9]*$/.test(num)) {
                alert("请输入数字");
                $(this).val("");
                return;
            }
            let row = $(this).parent().parent();
            let costPrice = $(row).find("td:eq(7)").text();
            let total = costPrice * num;
            $(row).find("td:eq(8)").text(total);
        })
    })
    function initialMaterial() {
        let id = sessionStorage.getItem("moduleId");
        sessionStorage.clear();
        $.ajax({
            url: "/d-file/initialMaterial?id=" + id,
            type: "get",
            datatype: "json",
            success: function (data) {
                console.log(data)
                $('#productName').text(data.productName);
                $('#productId').text(data.productId)
            }
        })
    }
    function addToTable(id){
        if (id == null){
            return;
        }
        $.ajax({
            url: "/d-module/getMaterialById?id=" + id,
            type: "get",
            datatype: "json",
            success: function (data) {
                console.log(data)
                let row = "<tr>" +
                    "<td class='ckbox'><input type='checkbox' /></td>" +
                    "<td>" + data.productId + "</td>" +
                    "<td>" + data.productName + "</td>" +
                    "<td>" + data.dproductUse.useName + "</td>" +
                    "<td>" + data.productDescribe+ "</td>" +
                    "<td class='num'>" +
                    "<input class='num-input' value='1'></td>" +
                    "<td>" + data.personalUnit+ "</td>" +
                    "<td>" + data.costPrice + "</td>" +
                    "<td>" + data.costPrice + "</td>" +
                    "</tr>";
                $("#template").append(row);
            }
        })
    }
    function updateDateTime(){
        let date = new Date();
        let year = date.getFullYear();
        let month = (date.getMonth() + 1).toString().padStart(2, '0');
        let day = date.getDate().toString().padStart(2,'0');
        let hours = date.getHours().toString().padStart(2,'0');
        let minutes = date.getMinutes().toString().padStart(2,'0');
        let seconds = date.getSeconds().toString().padStart(2,'0');
        let dateTimeStr = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        $("#time").text(dateTimeStr);
    }
</script>
</body>
</html>
